<template>
  <div class="emoji-content">
    <div class="emoji" v-if="emojiStore.isEmojiVisible">
      <div class="emoji-wrapper">
        <ul class="emoji-list" id="emoji-list">
          <!-- 使用 v-for 指令循环渲染表情列表项 -->
          <li v-for="(item, index) in emojiList" :key="index" class="emoji-item" @click="sendEmoji(item)">
            <img :src="item.path" :alt="item.name">
          </li>
        </ul>
      </div>
    </div>
    <div class="mask" v-if="emojiStore.isEmojiVisible" @click="closeEmoji"></div>
  </div>
</template>

<script setup>
import { watch, defineEmits } from 'vue';
import { useEmojiStore } from '@/stores/emoji';
const emojiStore = useEmojiStore();
const emits = defineEmits(['sendEmoji']);

// 导入表情图片资源
import angryFace from '@/assets/img/emoji/angry-face.png';
import anguishedFace from '@/assets/img/emoji/anguished-face.png';
import astonishedFace from '@/assets/img/emoji/astonished-face.png';
import badTwo from '@/assets/img/emoji/bad-two.png';
import bless from '@/assets/img/emoji/bless.png';
import bye from '@/assets/img/emoji/bye.png';
import clickTap from '@/assets/img/emoji/click-tap.png';
import cryingBaby from '@/assets/img/emoji/crying-baby.png';
import disappointedFace from '@/assets/img/emoji/disappointed-face.png';
import distraughtFace from '@/assets/img/emoji/distraught-face.png';
import dizzyFace from '@/assets/img/emoji/dizzy-face.png';
import emotionHappy from '@/assets/img/emoji/emotion-happy.png';
import emotionUnhappy from '@/assets/img/emoji/emotion-unhappy.png';
import expressionlessFace from '@/assets/img/emoji/expressionless-face.png';
import faceWithSmilingOpenEyes from '@/assets/img/emoji/face-with-smiling-open-eyes.png';
import flirt from '@/assets/img/emoji/flirt.png';
import grinningFaceWithSquintingEyes from '@/assets/img/emoji/grinning-face-with-squinting-eyes.png';
import grinningFaceWithTightlyClosedEyes from '@/assets/img/emoji/grinning-face-with-tightly-closed-eyes.png';
import loudlyCryingFaceWhitOpenMouth from '@/assets/img/emoji/loudly-crying-face-whit-open-mouth.png';
import middleFinger from '@/assets/img/emoji/middle-finger.png';
import poutingFace from '@/assets/img/emoji/pouting-face.png';
import respect from '@/assets/img/emoji/respect.png';
import six from '@/assets/img/emoji/six.png';
import swing from '@/assets/img/emoji/swing.png';
import thumbsUp from '@/assets/img/emoji/thumbs-up.png';
import upsideDownFace from '@/assets/img/emoji/upside-down-face.png';
import winkingFaceWithOpenEyes from '@/assets/img/emoji/winking-face-with-open-eyes.png';
import yep from '@/assets/img/emoji/yep.png';
import alarm from '@/assets/img/emoji/alarm.png';
import balanceTwo from '@/assets/img/emoji/balance-two.png';
import bug from '@/assets/img/emoji/bug.png';
import caution from '@/assets/img/emoji/caution.png';
import fireExtinguisher from '@/assets/img/emoji/fire-extinguisher.png';
import harm from '@/assets/img/emoji/harm.png';
import key from '@/assets/img/emoji/key.png';
import keyhole from '@/assets/img/emoji/keyhole.png';
import protect from '@/assets/img/emoji/protect.png';
import radiation from '@/assets/img/emoji/radiation.png';
import umbrella from '@/assets/img/emoji/umbrella.png';

// 创建表情列表
const emojiList = [
  { name: 'angry-face', path: angryFace },
  { name: 'anguished-face', path: anguishedFace },
  { name: 'astonished-face', path: astonishedFace },
  { name: 'bad-two', path: badTwo },
  { name: 'bless', path: bless },
  { name: 'bye', path: bye },
  { name: 'click-tap', path: clickTap },
  { name: 'crying-baby', path: cryingBaby },
  { name: 'disappointed-face', path: disappointedFace },
  { name: 'distraught-face', path: distraughtFace },
  { name: 'dizzy-face', path: dizzyFace },
  { name: 'emotion-happy', path: emotionHappy },
  { name: 'emotion-unhappy', path: emotionUnhappy },
  { name: 'expressionless-face', path: expressionlessFace },
  { name: 'face-with-smiling-open-eyes', path: faceWithSmilingOpenEyes },
  { name: 'flirt', path: flirt },
  { name: 'grinning-face-with-squinting-eyes', path: grinningFaceWithSquintingEyes },
  { name: 'grinning-face-with-tightly-closed-eyes', path: grinningFaceWithTightlyClosedEyes },
  { name: 'loudly-crying-face-whit-open-mouth', path: loudlyCryingFaceWhitOpenMouth },
  { name: 'middle-finger', path: middleFinger },
  { name: 'pouting-face', path: poutingFace },
  { name: 'respect', path: respect },
  { name: 'six', path: six },
  { name: 'swing', path: swing },
  { name: 'thumbs-up', path: thumbsUp },
  { name: 'upside-down-face', path: upsideDownFace },
  { name: 'winking-face-with-open-eyes', path: winkingFaceWithOpenEyes },
  { name: 'yep', path: yep },
  { name: 'alarm', path: alarm },
  { name: 'balance-two', path: balanceTwo },
  { name: 'bug', path: bug },
  { name: 'caution', path: caution },
  { name: 'fire-extinguisher', path: fireExtinguisher },
  { name: 'harm', path: harm },
  { name: 'key', path: key },
  { name: 'keyhole', path: keyhole },
  { name: 'protect', path: protect },
  { name: 'radiation', path: radiation },
  { name: 'umbrella', path: umbrella }
];
// 发送表情方法
const sendEmoji = (item) => {
  if (item && item.path) {
    console.log('Received valid emoji path:', item.path);
    emits('sendEmoji', item.name); // 发送表情名称
  } else {
    console.error('Invalid emoji path type:', item);
  }
};

// 关闭表情选择框方法
const closeEmoji = () => {
  emojiStore.closeEmoji();
};


watch(() => emojiStore.isEmojiVisible, (newValue) => {
  console.log('EmojiPicker isVisible 变化为:', newValue);
});
</script>

<style scoped>
.emoji-content {
  position: relative;
  bottom: 10px;
}

.emoji {
  width: 400px;
  height: 200px;
  background-color: rgb(160 161 165);
  position: fixed; /* 改为固定定位 */
  bottom: 120px; /* 显示在输入框上方 */
  left: 320px;
  border-radius: 10px;
  transition: 0.3s;
  z-index: 999; 
}

.emoji::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid rgb(39, 42, 55);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  bottom: -8px;
  left: 15px;
  z-index: 100;
}

.emoji-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}

.emoji-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 1px;
}

.emoji-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  background: rgb(95, 101, 122);
}

.emoji-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 10px;
  background: rgb(39, 42, 55);
}

.emoji-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 10px;
}

.emoji-item {
  list-style: none;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin: 5px;
  position: relative;
  cursor: pointer;
}

.emoji-item:hover {
  background-color: rgb(50, 54, 68);
}

.emoji-item img {
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  background: transparent;
  left: 0;
  top: 0;
  z-index: 998;
}
</style>